<!--  -->
<template>
  <div class="grammar-check">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="goQuit"></span>
      </div>
      <div class="course-title">
        <template v-if="checkMode">
          <span>检测</span>
        </template>
        <template v-else>
            <span
                class="check-title"
                :class="{ check__active: checkKey === '1' }"
                @click="changeTab('1')"
            >未检测</span
            >
          <span
              class="check-title"
              :class="{ check__active: checkKey === '2' }"
              @click="changeTab('2')"
          >已检测</span
          >
        </template>
      </div>
      <div class="btn-group">
        <a-dropdown :trigger="['click']">
          <div class="head-translate-wrap">
            <img
                v-show="allTranslation === '1'"
                class="translate-btn"
                src="@/assets/reverse/translate-zh.png"
                alt=""
            />
            <img
                v-show="allTranslation === '2'"
                class="translate-btn"
                src="@/assets/reverse/translate-en.png"
                alt=""
            />
            <img
                v-show="allTranslation === '3'"
                class="translate-btn"
                src="@/assets/reverse/translate-all.png"
                alt=""
            />
          </div>
          <a-menu slot="overlay">
            <a-menu-item @click="selectTranslation('1')">中文</a-menu-item>
            <a-menu-item @click="selectTranslation('2')">英文</a-menu-item>
            <a-menu-item @click="selectTranslation('3')">中英文</a-menu-item>
          </a-menu>
        </a-dropdown>

        <div v-if="checkKey === '1'" class="check-btns">
          <div class="check-num" v-if="checkMode === true">
            <div class="true-num">
              <img src="@/assets/reverse/success-icon.png" alt="" />
              <span>{{ checkedTrueNum }} 句</span>
            </div>
            <div class="false-num">
              <img src="@/assets/reverse/error-icon.png" alt="" />
              <span>{{ checkedFalseNum }} 句</span>
            </div>
          </div>
          <el-button
              class="check-submit"
              type="primary"
              shape="round"
              style="z-index: 999"
              @click="goCheck"
          >{{ checkMode === true ? "提交" : "开始检测" }}</el-button
          >
        </div>
      </div>
    </div>
    <div class="list-wrap">
      <a-tabs :activeKey="checkKey" :tabBarStyle="{ display: 'none' }">
        <a-tab-pane key="1" tab="" :forceRender="true">
          <div class="proofread-list-wrap list-colum-width" v-if="proofreadList.green.length">
            <proofreadItem
                v-for="item in proofreadList.green"
                :allType="allTranslation"
                :renderData="item"
                :key="item.id"
                :isCheck="checkMode"
                @checkStatus="totalChecked"
            ></proofreadItem>
            <div class="list-colum-width"></div>
            <div class="list-colum-width"></div>
          </div>
          <div class="list-empty" v-else>
            <Empty></Empty>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="" :forceRender="true">
          <div class="proofread-list-wrap list-colum-width" v-if="proofreadList.proof.length">
            <proofreadItem
                v-for="item in proofreadList.proof"
                :allType="allTranslation"
                :renderData="item"
                :key="item.id"
            ></proofreadItem>
            <div class="list-colum-width"></div>
            <div class="list-colum-width"></div>
          </div>
          <div class="list-empty" v-else>
            <Empty></Empty>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <startCheckModal :visible.sync="startCheckVisible" @ok="startCheck" />
  </div>
</template>

<script>
import { Tabs, Dropdown, Menu, } from "ant-design-vue";
import proofreadItem from "./proofreadItem";
import Empty from "@/views/components/empty.vue";
import startCheckModal from "./startCheckModal";
import {mapState} from "vuex";
import {getColorOver, getFetchManual} from "@/api/reverse";
export default {
  name: "proofread",
  components: {
    proofreadItem,
    startCheckModal,
    ATabs: Tabs,
    Empty,
    ATabPane: Tabs.TabPane,
    ADropdown: Dropdown,
    AMenu: Menu,
    AMenuItem: Menu.Item,
  },
  data() {
    return {
      checkKey: "1",
      proofreadList: {
        proof: [],
        green: [],
      },
      startCheckVisible: false,
      allTranslation: "1",
      checkedTrueNum: 0,
      checkedFalseNum: 0,
      checkMode: false,
    };
  },
  computed: {
    ...mapState(["reverseStatus"]),
  },
  watch: {},
  methods: {
    changeTab(key) {
      this.checkKey = key;
    },
  async fetchProofread() {
      const data ={
        courseId:this.reverseStatus.curr_id,
        userId:this.reverseStatus.userId,
        packageId:this.reverseStatus.packageId,
        color:'green',
      }
      await getFetchManual(data).then((res) => {
        res.data.filter(v=>{
          if (v.success == 1){
            this.proofreadList.green.push(v)
          }else {
            this.proofreadList.proof.push(v)
          }
        });
      });
    },
    subProofread(sen_id, error_id) {
      let data = {
        courseId:this.reverseStatus.curr_id,
        userId:this.reverseStatus.userId,
        packageId:this.reverseStatus.packageId,
        errorIds:error_id,
        successIds:sen_id,
        color:'green',
      }
      getColorOver(data).then((res)=>{
        this.$message.success("提交成功");
        this.$router.push("/study/grammar?ref=homepage&userId="+this.reverseStatus.userId);
      })
      // proofreadSub({
      //   ...this.$route.query,
      //   sen_id: sen_id.toString(),
      //   error_id: error_id.toString(),
      // }).then((res) => {
      //   if (res.code === SUCCESS_CODE) {
      //     this.$message.success("提交成功");
      //     this.$router.push("/reverse");
      //   }
      // });
    },
    goCheck() {
      if (!this.checkMode) {
        this.checkMode = true;
        // this.startCheckVisible = true;
      } else {
        this.checkCollection = this.checkCollection || {};
        if (Object.keys(this.checkCollection).length === 0) {
          this.$message.error("没有选择句子哦~");
          return false;
        }
        let key,
            sen_id = [],
            error_id = [];
        for (key in this.checkCollection) {
          if (this.checkCollection[key] === "1") {
            sen_id.push(key);
          } else if (this.checkCollection[key] === "2") {
            error_id.push(key);
          }
        }
        this.subProofread(sen_id, error_id);
      }
    },
    startCheck(code) {
      if (!code) {
        this.$message.error("请填写教学码");
      } else {
        validCode({
          code: code,
        }).then((res) => {
          if (res.code === SUCCESS_CODE) {
            this.startCheckVisible = false;
            this.checkMode = true;
          } else {
            this.$message.error("你输入的教学码有误！请重新输入。");
          }
        });
      }
    },
    selectTranslation(type) {
      this.allTranslation = type;
    },
    totalChecked({ id, status }) {
      this.checkCollection = this.checkCollection || {};
      this.checkCollection[id] = status;
      console.log(this.checkCollection);
      this.checkedTrueNum = Object.values(this.checkCollection).filter(
          (v) => v === "1"
      ).length;
      console.log(this.checkedTrueNum);
      this.checkedFalseNum = Object.values(this.checkCollection).filter(
          (v) => v === "2"
      ).length;
    },
    fetchEndTime() {
      // fetchEndTime(this.$route.query);
    },
    goQuit() {
      this.$router.push("/study/grammar?ref=homepage&userId="+this.reverseStatus.userId);
    },
  },
  created() {
    this.fetchProofread();
    // this.subProofread()
  },
  mounted() {},
  beforeDestroy() {
    document.getElementById("reverse-audio").pause();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    // this.fetchEndTime();
    next();
  },
};
</script>
<style  scoped>
/* @import url(); 引入公共css类 */
@import url("./index.css");
</style>
